import React, { FC, useEffect } from "react"
import { Button, Checkbox, Form, Input, Select, Space } from "antd"
import { OptionType, QuestionRadioPropsType } from "./interface"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
import { nanoid } from "nanoid"

const PropComponent: FC<QuestionRadioPropsType> = (props: QuestionRadioPropsType) => {
    const { title, isVertical, value, options, onChange, disabled } = props
    const [form] = Form.useForm()

    useEffect(() => {
        form.setFieldsValue({ title, isVertical, value, options })
    }, [title, isVertical, value, options])

    function handleValuesChange() {
        if (onChange == null) return
        // 调用 父组件传递归来的 onChange函数

        const newValues = form.getFieldsValue() as QuestionRadioPropsType

        // 我没有出现这样的bug，但还是最好加上吧
        // 清除option 会导致数据中的text变为undefined，需要清除undefined的数据项
        if (newValues.options) {
            // 需要清除 text undefined 的 选项
            // filter为true 则保留，为false过滤掉
            newValues.options = newValues.options.filter(opt => !(opt.text == null))
        }

        const { options = [] } = newValues

        // 新添加的选项的value值为空，应该添加唯一的值
        options.forEach(opt => {
            if (opt.value) return
            opt.value = nanoid(5)
        })

        onChange(newValues)
    }

    return (
        <Form layout="vertical" initialValues={{ title, isVertical, value, options }} onValuesChange={handleValuesChange} disabled={disabled} form={form}>
            <Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入标题" }]}>
                <Input />
            </Form.Item>

            {/* 动态添加、删减 表单项 */}
            <Form.Item label="选项">
                <Form.List name="options">
                    {(fields, { add, remove }) => (
                        <>
                            {/* fields 就是 options */}
                            {/* 遍历把已有的选项罗列出来，可以删除 */}
                            {fields.map((item, index) => {
                                const { key, name } = item

                                return (
                                    <Space key={key} align="baseline">
                                        {/* name={[name, "text"]} 表示的哪个选项的文本（这里是列表），相对于键值对*/}
                                        {/* name就是0、1、2 name={[name, "text"]} 表示路径是 options[1].text */}
                                        <Form.Item
                                            name={[name, "text"]}
                                            rules={[
                                                { required: true, message: "请输入选项文字" },
                                                {
                                                    validator: (_, text) => {
                                                        const { options = [] } = form.getFieldsValue()
                                                        let num = 0
                                                        options.forEach((opt: OptionType) => {
                                                            if (opt.text === text) {
                                                                // 记录text 相同的个数，预期为1，就是自己本身
                                                                num++
                                                            }
                                                        })
                                                        if (num === 1) return Promise.resolve()
                                                        return Promise.reject(new Error("和其他选项重复了"))
                                                    }
                                                }
                                            ]}
                                        >
                                            <Input placeholder="请输入选项文字" />
                                        </Form.Item>

                                        {/* 当前选项删除按钮 */}
                                        {/* name相对于options[0]、options[1] */}
                                        {index > 1 && <MinusCircleOutlined onClick={() => remove(name)} />}
                                    </Space>
                                )
                            })}

                            {/* 添加选项 */}
                            <Form.Item>
                                {/* add就是给options数组添加选项 */}
                                <Button type="link" block onClick={() => add({ text: "", value: "" })} icon={<PlusOutlined />}>
                                    添加选项
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form.Item>

            <Form.Item label="默认选中" name="value">
                <Select value={value} options={options?.map(opt => ({ value: opt.value, label: opt.text || "" }))}></Select>
            </Form.Item>

            <Form.Item name="isVertical" valuePropName="checked">
                <Checkbox>竖向排列</Checkbox>
            </Form.Item>
        </Form>
    )
}

export default PropComponent
